<template>
  <div>
    <!--创建标签开始  -->
    <form>
      <view class="establish">
        <view class="left">创建个性标签</view>
        <view class="center"><input placeholder='最多5个字哦'></input></view>

        <button class="add-btn">添加</button>
      </view>
    </form>
    <!--创建标签结束  -->
    <!--随机标签开始  -->

    <view class="tag-content">
      <view class="tags">我是小仙女</view>
      <view class="tags">我爱我自己</view>
      <view class="tags">我是最好看的</view>
      <view class="tags">有钱</view>
      <view class="tags">哈哈哈哈哈哈哈</view>
      <view class="tags">发财</view>
      <view class="tags">开心开心</view>
      <view class="tags">我爱我自己</view>
      <view class="tags">我是最好看的</view>
      <view class="tags">哈哈哈哈哈哈哈</view>
      <view class="tags">开心开心</view>

    </view>
    <button class="switch-btn">换一批</button>
    <!--随机标签结束  -->
    <!--我的标签开始  -->

    <view class=" tag-title">我的标签</view>
    <form>
      <view class="tag-content my-tags">
        <view class="tags">我是小仙女</view>
        <view class="tags">我爱我自己</view>
        <view class="tags">我是最好看的</view>
        <view class="tags">有钱</view>
        <view class="tags">哈哈哈哈哈哈哈</view>
        <view class="tags">发财</view>
        <view class="tags">开心开心</view>
        <view class="tags">我爱我自己</view>
        <view class="tags">我是最好看的</view>
        <view class="tags">哈哈哈哈哈哈哈</view>
        <view class="tags">开心开心</view>
      </view>
      <view class="footer">
        <button class="build-btn">生成</button>
      </view>
    </form>
  </div>
</template>

<script>
    export default {
    }
</script>

<style scoped>
  /*创建标签  */
  .establish {
    margin-top: 60rpx;
    margin-bottom: 110rpx;
    width: 100%;
    height: 60rpx;
    padding: 0rpx 42rpx 0 40rpx;
    box-sizing: border-box;
  }
  .establish .left{
    width: 168rpx;
    height: 60rpx;
    padding-top: 12rpx;
    box-sizing: border-box;
    float:left;
    font-size: 28rpx;
    color: #666;
  }
  .center{
    margin-left: 10rpx;
    width:350rpx;
    height:60rpx;
    border-bottom: 1rpx solid #eee;
    float:left;
    font-size: 24rpx;
    color: #999;
    padding-top: 10rpx;
    padding-left: 10rpx;
    box-sizing: border-box;
  }
  .add-btn{
    border: 2rpx solid #FF6D6D;
    border-radius: 8rpx;
    height:60rpx;
    width:140rpx;
    background: #fff;
    line-height: 60rpx;
    font-size: 28rpx;
    color: #ff6d6d;
  }

  /*随机标签  */
  .tag-content {
    flex-wrap: wrap;
    display: -webkit-flex;
    flex-direction: row;
    padding: 0 0 38rpx 40rpx;
    box-sizing: border-box;
    border-bottom: 1rpx solid #eee;
  }

  .tags {
    white-space: nowrap;
    padding: 4rpx 12rpx 4rpx 12rpx;
    box-sizing: border-box;
    border: 1rpx solid #333;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #333;
    float: left;
    margin-right: 40rpx;
    margin-bottom: 40rpx;
  }
  .switch-btn{
    margin-top: 30rpx;
    margin-bottom: 68rpx;
    width:184rpx;
    height:60rpx;
    background: #fff;
    border: 2rpx solid #FF6D6D;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #FF6D6D;
    line-height: 60rpx;
  }

  /*我的标签  */
  .tag-title{
    margin-left: 40rpx;
    margin-bottom: 40rpx;
    height:52rpx;
    width:100%;
    font-size: 28rpx;
    color: #666;
    border-bottom: 1rpx solid #eee;
  }
  .my-tags{
    border-bottom:none;
  }
  .footer{
    width:100%;
    height:98rpx;
    background: #f3f3f3;
    position: fixed;
    bottom: 0;
  }
  .build-btn{
    margin: 14rpx 214rpx 12rpx 216rpx;
    width:320rpx;
    height:72rpx;
    background: #FF6D6D;
    border: 2rpx solid #FF6D6D;
    border-radius: 8rpx;
    font-size: 36rpx;
    color: #fff;
    line-height: 72rpx;
  }
</style>
